<template>
    <div class="album">
        <!-- 全部新碟 -->
        <div class="all">
            <div class="tit">
                <h3><span>全部新碟</span></h3>
                <div class="tab clearfix">
                    <li v-for="tit,index in title" :key="index">
                        <a class="underline" @click="changeArea(tit.area)">{{tit.name}}</a>
                        <span class="line" v-if="index != 5">|</span>
                    </li>
                </div>
            </div>
            <ul class="m-list clearfix">
                <li v-for="album,index in showAlbums" :key="index">
                    <img v-lazy="album.blurPicUrl" />
                    <router-link :to="{path:'/album',query:{id:`${album.id}`}}"></router-link>
                    <p class="over name" :title="album.name">
                        <router-link :to="{path:'/album',query:{id:`${album.id}`}}" style="color:#333;">{{album.name}}</router-link>
                    </p>
                    <p class="over artist">
                        <span v-if="album.artist">
                           <router-link :to="{path:'/artist/song',query:{id:album.artist.id}}" :title="album.artist.name" class="underline">{{album.artist.name}}</router-link>
                        </span>
                    </p>
                    <a class="play"></a>
                </li>
            </ul>
        </div>
        <!-- 全部新碟 -->
        <!-- 分页器 -->
        <Pagination :pageNo='pageNo' :pageSize='pageSize' :total='total' :continues='5' @getPageNo="getPageNo"></Pagination>
    </div>

</template>

<script>
    import Pagination from '@/components/Pagination'
    export default {
        name: "album",
        components:{Pagination},
        data() {
            return {
                //热门新碟
                hotAlbums:[],
                //全部新碟
                allAlbum:[],
                //展示的全部新碟
                showAlbums:[],
                //全部新碟的标题分类
                title:[
                    {
                        name:'全部',
                        area:'ALL',
                    },
                    {
                        name:'华语',
                        area:'ZH',
                    },
                    {
                        name:'欧美',
                        area:'EA',
                    },
                    {
                        name:'韩国',
                        area:'KR',
                    },
                    {
                        name:'日本',
                        area:'JP',
                    },
                    {
                        name:'港台',
                        area:'GT',
                    },
                ],
                pageSize:35,
                pageNo:1,
                type:'new',
                total:1000,
            }
        },
        computed:{
            area(){
                if(this.$route.query.area == undefined) return "ALL";
                return this.$route.query.area;
            }
        },
        watch:{
            area(){
                this.getAll();
            }
        },
        methods:{
            // 获取全部新碟
            async getAll(){
                let obj = await this.$API.reqAlbum(this.pageSize,(this.pageNo-1)*this.pageSize,this.area,this.type);
                if(obj.result.weekData)
                {
                    this.total = obj.result.weekData.length;
                    this.allAlbum = obj.result.weekData;
                }
                else{
                    this.total = obj.result.monthData.length;
                    this.allAlbum = obj.result.monthData;
                }
                this.changeAlbums();
            },
            //手动分页
            changeAlbums(){
                this.showAlbums = this.allAlbum.slice((this.pageNo-1)*this.pageSize,this.pageSize*this.pageNo);
            },
            //改变地区选择
            changeArea(area){
                this.$router.push({
                    path:'/home/album',
                    query:{
                        area
                    }
                })
            },
            //接受当前页码
            getPageNo(pageNo){
                this.pageNo = pageNo;
                this.changeAlbums();
            }
        },
        mounted(){
            this.getAll();
        }

    }
</script>

<style lang="less" scoped>
    .album {
        width: 982px;
        margin: 0 auto;
        border: 1px solid #d3d3d3;
        background-color: #fff;
        min-height: 700px;
        padding: 40px;
        .hot{
            .tit {
                width: 100%;
                height: 42px;
                border-bottom: 2px solid #c20c0c;

                h3 {
                    float: left;
                    font-size: 24px;
                    font-weight: normal;
                    color: #333;
                }
            }
        }
        .all{
            .tit {
                width: 100%;
                height: 42px;
                border-bottom: 2px solid #c20c0c;
                h3 {
                    float: left;
                    font-size: 24px;
                    font-weight: normal;
                    color: #333;
                }
                .tab{
                    float: left;
                    margin: 12px 0 0 20px;

                    li{
                        float: left;
                        a{
                            float: left;
                            &:hover{
                                color: #666;
                            }
                        }
                        .line{
                            display: block;
                            float: left;
                            margin: 0 10px;
                            margin-top: -2px;
                        }
                    }
                }
            }
        }
        .m-list {
            margin: 20px 0 0 -33px;
            width: 933px;
            min-height: 416px;

            li {
                float: left;
                width: 186px;
                height: 208px;
                padding: 0 0 30px 33px;
                position: relative;
                img {
                    width: 130px;
                    height: 130px;
                }
                >a {
                    width: 153px;
                    height: 130px;
                    position: absolute;
                    top: 0;
                    left: 33px;
                    background: url("./images/coverall.png") no-repeat 0 -845px;
                    &:hover {
                        cursor: pointer;
                    }
                }
                .name {
                    text-align: left;
                    color: #333;
                    font-family: Arial, Helvetica, sans-serif;
                    -webkit-text-size-adjust: none;
                    display: block;
                    margin: 8px 0 3px;
                    font-size: 14px;

                    &:hover {
                        cursor: pointer;
                        text-decoration: underline;
                    }
                }
                .artist{
                    a:hover{
                        color: #666;
                    }
                }
                .play {
                    position: absolute;
                    width: 28px;
                    height: 28px;
                    left: 130px;
                    top: 95px;
                    background: url("./images/iconall.png") no-repeat 0 -140px;
                    display: none;
                }
                &:hover .play {
                    display: block;
                }
            }
        }
    }
</style>